<template>
  <div class="user-profile">
    <div class="container">
      <div class="row">
        <div class="col-lg-3">
          <div class="profile-sidebar">
            <div class="user-info">
              <div class="avatar-section">
                <img :src="userStore.userInfo?.avatar" alt="用户头像" class="user-avatar" />
                <h3 class="username">{{userStore.userInfo?.nickname}}</h3>
                <p class="user-title">资深旅行者</p>
              </div>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-number">28</span>
                  <span class="stat-label">游记</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">156</span>
                  <span class="stat-label">粉丝</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">89</span>
                  <span class="stat-label">关注</span>
                </div>
              </div>
            </div>
            
            <div class="profile-menu">
              <el-menu :default-active="activeTab" @select="handleMenuSelect">
                <el-menu-item index="posts">
                  <el-icon><Document /></el-icon>
                  <span>我的游记</span>
                </el-menu-item>
                <el-menu-item index="favorites">
                  <el-icon><Star /></el-icon>
                  <span>收藏夹</span>
                </el-menu-item>
                <el-menu-item index="settings">
                  <el-icon><Setting /></el-icon>
                  <span>账户设置</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
        </div>
        
        <div class="col-lg-9">
          <div class="profile-content">
            <!-- 我的游记 -->
            <div v-if="activeTab === 'posts'" class="posts-section">
              <div class="section-header">
                <h3>我的游记</h3>
                <el-button type="primary" @click="createPost">
                  <el-icon><Plus /></el-icon>
                  写游记
                </el-button>
              </div>
              <div class="posts-grid">
                <div class="row">
                  <div v-for="post in userPosts" :key="post.id" class="col-md-6 mb-4">
                    <div class="post-card">
                      <img :src="post.cover" :alt="post.title" class="post-cover" />
                      <div class="post-info">
                        <h4 class="post-title">{{ post.title }}</h4>
                        <p class="post-date">{{ formatDate(post.createTime) }}</p>
                        <div class="post-stats">
                          <span><i class="bi bi-eye"></i> {{ post.viewCount }}</span>
                          <span><i class="bi bi-heart"></i> {{ post.likeCount }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 收藏夹 -->
            <div v-if="activeTab === 'favorites'" class="favorites-section">
              <div class="section-header">
                <h3>我的收藏</h3>
              </div>
              <div class="favorites-list">
                <div v-for="item in favorites" :key="item.id" class="favorite-item">
                  <img :src="item.cover" :alt="item.title" />
                  <div class="item-info">
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.author }}</p>
                    <span class="collect-date">收藏于 {{ formatDate(item.collectTime) }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 账户设置 -->
            <div v-if="activeTab === 'settings'" class="settings-section">
              <div class="section-header">
                <h3>账户设置</h3>
              </div>
              <div class="settings-form">
                <el-form :model="settingsForm" label-width="120px">
                  <el-form-item label="用户名">
                    <el-input v-model="settingsForm.username" />
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="settingsForm.email" />
                  </el-form-item>
                  <el-form-item label="个人简介">
                    <el-input v-model="settingsForm.bio" type="textarea" :rows="3" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="saveSettings">保存设置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMenu, ElMenuItem, ElButton, ElIcon, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { defaultAvatar, images } from '@/assets/images'
import { Document, Star, Setting, Plus } from '@element-plus/icons-vue'

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const activeTab = ref('posts')

// 用户游记数据
const userPosts = ref([
  {
    id: 1,
    title: '北京胡同文化之旅',
    cover: images.img20221106190735,
    createTime: '2024-01-15',
    viewCount: 1258,
    likeCount: 89
  },
  {
    id: 2,
    title: '云南大理洱海行记',
    cover: images.img90,
    createTime: '2024-01-10',
    viewCount: 956,
    likeCount: 67
  }
])

// 收藏数据
const favorites = ref([
  {
    id: 1,
    title: '成都美食攻略完全版',
    cover: images.img980,
    author: '美食达人',
    collectTime: '2024-01-12'
  }
])

// 设置表单
const settingsForm = reactive({
  username: '旅行达人',
  email: 'traveler@example.com',
  bio: '热爱旅行的自由行者，喜欢记录旅途中的美好瞬间。'
})

// 菜单选择
const handleMenuSelect = (index: string) => {
  activeTab.value = index
}

// 创建游记
const createPost = () => {
  ElMessage.info('创建游记功能开发中...')
}

// 保存设置
const saveSettings = () => {
  ElMessage.success('设置保存成功！')
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.user-profile {
  padding: 40px 0;
  min-height: 100vh;
  background: #f5f5f5;
}

.profile-sidebar {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.user-info {
  padding: 30px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.username {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.user-title {
  opacity: 0.9;
  margin-bottom: 20px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.profile-menu {
  padding: 20px 0;
}

.profile-content {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.section-header h3 {
  margin: 0;
  color: #333;
}

.post-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.post-cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.post-info {
  padding: 15px;
}

.post-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.post-date {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.post-stats {
  display: flex;
  gap: 15px;
  font-size: 0.9rem;
  color: #888;
}

.post-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.favorite-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all 0.3s;
}

.favorite-item:hover {
  border-color: #667eea;
  background: #f8f9ff;
}

.favorite-item img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.item-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.item-info p {
  margin: 0 0 8px 0;
  color: #666;
}

.collect-date {
  font-size: 0.9rem;
  color: #999;
}

.settings-form {
  max-width: 500px;
}

@media (max-width: 768px) {
  .user-profile {
    padding: 20px 0;
  }
  
  .profile-sidebar {
    margin-bottom: 20px;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style>


